<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>商品详情</title>
        <script src= "js/jquery-1.11.3.min.js" type="text/javascript"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
        <style type="text/css">
        *{
          margin: 0;
          padding: 0;
        }
        body{
          background-color: #fff;
        }
        li{
          list-style: none;
        }
        a{
         text-decoration: none;
        }
        .main .mian-right table{
          width: 96%;
          margin-left: 2%;
          margin-top: 40px;
        }
        .main .mian-right table td{
          line-height: 50px;
          color: #666;
          font-size: 14px;
        }
        .main .mian-right table td:first-child{
          width: 100px;
        }
        .main .mian-right table td input{
          line-height: 30px;
          color: #666;
          height: 30px;
          border-radius: 5px;
          outline: none;
          border: 1px solid #999;
          padding-left: 10px;
        }
        .main .mian-right table ul {
          float: left;
          padding-right:30px;
        }
        .main .mian-right table ul li{
          float: left;
          padding: 0 15px;
          line-height: 40px;
          position: relative;
        }
        .main .mian-right table .inp2{
          width: 120px;
          margin: 0 10px;
        }
        .main .mian-right table .inp1{
          width: 200px;
          margin: 0px 10px;
        }
        .main .mian-right table textarea{
          height:150px;
          margin-top: 20px;
          width: 50%;
          outline: none;
          line-height: 30px;
          border-radius: 5px;
          padding-left: 10px;
          resize: none;
        }
        .main .mian-right table select{
          line-height: 30px;
          color: #666;
          height: 30px;
          border-radius: 5px;
          outline: none;
          border: 1px solid #999;
          width: 110px;
          margin: 0 10px;
        }
        .main .mian-right table p{
          display: inline-block;
          padding: 0 10px;
        }
        .rad1{
          position: absolute;
          top: 4px;
          left: 0;
        }
        .main .mian-right table td .right-sc input{
          height: 100px;
          width: 100px;
          display: block;
          position: absolute;
          left: 0;
          top: 10px;
          z-index: 111;
          opacity: 0;
        }
        .main .mian-right table td  .right-sc .sc{
          height: 100px;
          width: 112px;
          position: absolute;
          left: 0;
          top: 10px;
        }
        .main .mian-right table td  .right-sc img{
          height: 100px;
          width: 112px;
        }
        .main .mian-right table .tds{
          height: 110px;
          position: relative;
        }
        #dd,#dd1{
          padding-left:120px;
        }
        #dd img,#dd1 img{
          margin: 0 15px;
        }
        #cc{
          float: right;
          padding-left: 15px;
        }
        </style>
        <script type="text/javascript">
          $(document).ready(function () {
            $("#inputs").change(function () {
            var fil = this.files;
            for (var i = 0; i < fil.length; i++) {
            reads(fil[i]);
            }
            });
            });
          
            function reads(fil){
            var reader = new FileReader();
            reader.readAsDataURL(fil);
            reader.onload = function()
            {
            document.getElementById("dd").innerHTML += "<img src='"+reader.result+"'>";
            };
            } 

            $(document).ready(function () {
            $("#inputs1").change(function () {
            var fil = this.files;
            for (var i = 0; i < fil.length; i++) {
            reads1(fil[i]);
            }
            });
            });

            function reads1(fil){
            var reader = new FileReader();
            reader.readAsDataURL(fil);
            reader.onload = function()
            {
            document.getElementById("dd1").innerHTML += "<img src='"+reader.result+"'>";
            };
            } 
        </script>
    </head>
    <body>
       
       <div class="main">
           
           <div class="mian-right">
             <table>
               <tr>
                 <td>商品名称：</td>
                 <td><input type="text" class="inp1" placeholder="请输入商品名称"></input></td>
               </tr>
               <tr>
                 <td>商品价格：</td>
                 <td>
                   <ul>
                     <li>
                       市场价：<input type="text" class="inp2" placeholder="请输入市场价"></input>/元
                     </li>
                     <li>
                       单独购买价：<input type="text" class="inp2" placeholder="请输入单独购买价"></input>/元
                     </li>
                     <li>
                       组团价格：<input type="text" class="inp2" placeholder="请输入组团价格"></input>/元
                     </li>
                   </ul>
                 </td>
               </tr>
               <tr>
                 <td>商品颜色：</td>
                 <td>
                   <input type="text" class="inp2" placeholder="请输入商品颜色"></input>
                 </td>
               </tr>
               <tr>
                 <td>商品尺寸：</td>
                 <td>
                   <input type="text" class="inp2" placeholder="请输入商品尺寸"></input>
                 </td>
               </tr>
               <tr>
                 <td>商品库存：</td>
                 <td>
                   <input type="text" class="inp2" placeholder="请输入商品库存数量"></input>/件
                 </td>
               </tr>
               <tr>
                 <td>奖励金额：</td>
                 <td>
                   <input type="text" class="inp2" placeholder="请输入奖励金额"></input>/元
                 </td>
               </tr>
               <tr>
                 <td>加入活动：</td>
                 <td>
                   <select>
                     <option>不加入</option>
                     <option>加入一元购物</option>
                   </select>
                 </td>
               </tr>
               <tr>
                 <td>商品图片：</td>
                 <td class="tds">
                     <div class="right-sc">
                       <div class="right-img">
                         <input type="file" multiple id="inputs"/>
                         <img src="images/add-fmimg.png" class="sc">
                       </div>
                       <div id='dd'></div>
                   </div>
                 </td>
               </tr>
               <tr>
                 <td>详情图片：</td>
                 <td class="tds">
                   <div class="right-sc">
                       <div class="right-img">
                         <input type="file" multiple id="inputs1"/>
                         <img src="images/add-fmimg.png" class="sc">
                       </div>
                       <div id='dd1'></div>
                   </div>
                 </td>
               </tr>
               <tr>
                 <td>简介说明：</td>
                 <td><textarea></textarea></td>
               </tr>
               <tr>
                 <td></td>
                 <td>
                   <ul>
                     <li>是否包邮</li>
                     <li><input type="radio" name="si" checked class="rad1" id="aa"></input>是</li>
                     <li><input type="radio" name="si" class="rad1" id="bb"></input>否    
                        <div class="cc" id="cc">邮费<input type="text" class="inp2"></input>元</div>
                     </li>
                   </ul>
                   <ul>
                     <li>是否支持7天退货</li>
                     <li><input type="radio" name="si1" checked="checked" class="rad1"></input>是</li>
                     <li><input type="radio" name="si1" class="rad1"></input>否</li>
                   </ul>
                   <ul>
                     <li>是否支持48小时发货</li>
                     <li><input type="radio" name="si2" checked="checked" class="rad1"></input>是</li>
                     <li><input type="radio" name="si2" class="rad1"></input>否</li>
                   </ul>
                 </td>
               </tr>
             </table>
               <script type="text/javascript">
                 // $(function(){
                 //    if($(".aa").is(':checked')){
                 //     $(".bb").show();
                 //    }else{
                 //      $(".bb").hide();
                 //    }
                 // })
                 window.onload=function(){
                  var aa=document.getElementById("aa");
                  var bb=document.getElementById("bb");
                  var cc=document.getElementById("cc");
                    // alert(0);
                  function fn1(){
                    if(aa.style.checked===true){
                      // alert(0);
                      cc.style.display="block";
                    }else{
                      // alert(0);
                      cc.style.display="none";
                    }
                  }
                  fn1();
                  bb.onclick=function(){
                    aa.style.checked=true;
                    fn1();
                  }
                  aa.onclick=function(){
                    aa.style.checked=false;
                    fn1();
                  }
                  }
                  
               </script>
       </div>
    </body>
</html>
